<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OnOutsideClick</title>
    <style>
      html, body {
        width: 100%;
        margin: 0;
        padding: 0;
      }
      .concentric {
        width: 90%;
        height: 90%;
        padding: 5% 5%;
        background: rgba(0,0,0,0.4);
        border-radius: 100%;
        position: relative;
      }
      .concentric.highlight {
        background: rgba(255,255,0,0.5);
      }
      .concentric .label {
        position: absolute;
        top: 50%;
        left: 50%;
        color: white;
      }
      .concentric.highlight .label {
        color: black;
      }

      hr {
        margin: 2em 0;
      }
    </style>
  </head>
  <body>
    <script src="../../node_modules/react/dist/react.js"></script>
    <script src="../../node_modules/react-dom/dist/react-dom.js"></script>
    <script src="../../index.js"></script>

    <p>This test presents three concentric circles. Clicking inside a circle marks it as lit, clicking outside of it unmarks it.</p>
    <div id="app1"></div>
    <script src="test1.js"></script>

    <hr>

    <p>This test presents a text, revealed with a button press. Clicking the text should preserve it, while clicking anywhere else should hide it.</p>
    <div id="app2"></div>
    <link ref="stylesheet" href="style2.css">
    <script src="test2.js"></script>

    <p>This test is using custom element to render react app inside shadow DOM.</p>
    <test-app-3></test-app-3>
    <script src="test3.js"></script>
  </body>
</html>
